import React, { Component } from 'react';

export default class NameForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'cpf',
      text: '这是一段文本',
      selectValue: 'banana',
      sex: 'male',
      // chooseList: [
      //   { value: 'basketball', desc: '篮球' },
      //   { value: 'badminton', desc: '羽毛球' },
      //   { value: 'pin-pang', desc: '乒乓球' },
      //   { value: 'football', desc: '足球' },
      // ],
      chooseHobby: [],
    };
  }
  handleChange = (e) => {
    const filed = e.target.name;
    this.setState({
      [filed]: e.target.value,
    });
  };

  handleSubmit = (e) => {
    e.preventDefault();
    console.log('this.state :>> ', this.state);
  };
  handleCheckGroupChange = (e) => {
    const value = e.target.value;
    const filed = e.target.name;
    const checked = e.target.checked;
    this.setState((preState) => {
      return {
        [filed]: checked
          ? [...preState[filed], value]
          : preState[filed].filter((item) => item !== value),
      };
    });
  };
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <p>
          <label>
            姓名：
            <input
              name='name'
              type='text'
              value={this.state.name}
              onChange={this.handleChange}
            />
          </label>
        </p>
        <p>
          <label>
            文本域：
            <textarea
              name='text'
              value={this.state.text}
              onChange={this.handleChange}
            ></textarea>
          </label>
        </p>
        <p>
          <select
            name='selectValue'
            value={this.state.selectValue}
            onChange={this.handleChange}
          >
            <option value='banana'>香蕉</option>
            <option value='apple'>苹果</option>
            <option value='pear'>梨</option>
          </select>
        </p>
        <p>
          <label>
            <input
              type='radio'
              name='sex'
              checked={this.state.sex === 'male'}
              onChange={this.handleChange}
              value='male'
            />
            男
          </label>
          <label>
            <input
              type='radio'
              name='sex'
              checked={this.state.sex === 'female'}
              onChange={this.handleChange}
              value='female'
            />
            女
          </label>
        </p>
        <p>
          <label>
            <input
              name='chooseHobby'
              type='checkbox'
              value='basketball'
              onChange={this.handleCheckGroupChange}
            />
            篮球
          </label>
          <label>
            <input
              name='chooseHobby'
              type='checkbox'
              value='badminton'
              onChange={this.handleCheckGroupChange}
            />
            羽毛球
          </label>
          <label>
            <input
              name='chooseHobby'
              type='checkbox'
              value='pin-pang'
              onChange={this.handleCheckGroupChange}
            />
            乒乓球
          </label>
          <label>
            <input
              name='chooseHobby'
              type='checkbox'
              value='football'
              onChange={this.handleCheckGroupChange}
            />
            足球
          </label>
        </p>
        <p>
          <input type='submit' />
        </p>
      </form>
    );
  }
}
